import React from 'react';
import { Card,Pagination,Steps,Icon,Divider,Popover} from 'antd';
import StepSwitching from './components/step-switching';
import StepsBecomesClickable from './components/steps-becomes-clickable';
import StepsNavigationType from './components/steps-navigation-type';
const { Step } = Steps;


export default class KimMenu extends React.Component {

  render() {
    return (
      <>

      <Card title='简单的步骤条' style={{marginTop:10}}>
        <Steps current={1}>
          <Step title="Finished" description="This is a description." />
          <Step title="In Progress" subTitle="Left 00:00:08" description="This is a description." />
          <Step title="Waiting" description="This is a description." />
        </Steps>
      </Card>

      <Card title='迷你版的步骤条，通过设置 <Steps size="small"> 启用' style={{marginTop:10}}>
        <Steps current={1} size='small'>
          <Step title="Finished" description="This is a description." />
          <Step title="In Progress" subTitle="Left 00:00:08" description="This is a description." />
          <Step title="Waiting" description="This is a description." />
        </Steps>
      </Card>

      <Card title='通过设置 Steps.Step 的 icon 属性，可以启用自定义图标' style={{marginTop:10}}>
          <Steps>
            <Step status="finish" title="Login" icon={<Icon type="user" />} />
            <Step status="finish" title="Verification" icon={<Icon type="solution" />} />
            <Step status="process" title="Pay" icon={<Icon type="loading" />} />
            <Step status="wait" title="Done" icon={<Icon type="smile-o" />} />
          </Steps>
      </Card>

      <Card title='通过设置 Steps.Step 的 icon 属性，可以启用自定义图标' style={{marginTop:10}}>
          <Steps direction="vertical" size="small" current={1}>
            <Step title="Finished" description="This is a description." />
            <Step title="In Progress" description="This is a description." />
            <Step title="Waiting" description="This is a description." />
          </Steps>
      </Card>

      <Card title='通常配合内容及按钮使用，表示一个流程的处理进度' style={{marginTop:10}}>
          <StepSwitching />
      </Card>


      <Card title='使用 Steps 的 status 属性来指定当前步骤的状态' style={{marginTop:10}}>
      <Steps current={1} status="error" >
          <Step title="审核" subTitle='业务经理' description="This is a description" />
          <Step title="进行中" description="This is a description" />
          <Step title="等待中" description="This is a description" />
      </Steps>
      </Card>


      <Card title='包含步骤点的进度条' style={{marginTop:10}}>
          <Steps progressDot current={0}>
            <Step title="开始" description="This is a description." />
            <Step title="进行中" description="This is a description." />
            <Step title="等待中" description="This is a description." />
          </Steps>
          <Divider />
          <Steps progressDot current={1} direction="vertical">
            <Step title="开始" description="This is a description. This is a description." />
            <Step title="进行中" description="This is a description. This is a description." />
            <Step title="等待中" description="This is a description." />
          </Steps>
      </Card>


      <Card title='为点状步骤条增加自定义展示' style={{marginTop:10}}>
          <Steps 
            current={2}
            progressDot={ (dot, { status, index }) => <Popover content={ <span> step {index} status: {status} </span> } > {dot} </Popover> }>
              <Step title="开始【finish】" description="You can hover on the dot." />
              <Step title="进行中【process】" description="You can hover on the dot." />
              <Step title="等待中【wait】" description="You can hover on the dot." />
              <Step title="完成" description="You can hover on the dot." />
          </Steps>
      </Card>



      <Card title='可控状态 、可点击，设置 onChange 后，Steps 变为可点击状态' style={{marginTop:10}}>
          <StepsBecomesClickable />   
      </Card>


      <Card title='导航类型的步骤条' style={{marginTop:10}}>
          <StepsNavigationType />   
      </Card>


      
      </>
     
    );
  }
}




// API#
// <Steps>
//   <Step title="第一步" />
//   <Step title="第二步" />
//   <Step title="第三步" />
// </Steps>

// Steps#
// 整体步骤条。

// 参数	                    说明	类型	默认值	版本
// className	              步骤条类名	string	-	3.11.3
// type	                    步骤条类型，有 default 和 navigation 两种	string	default	3.22.0
// current	                指定当前步骤，从 0 开始记数。在子 Step 元素中，可以通过 status 属性覆盖状态	number	0	
// direction	              指定步骤条方向。目前支持水平（horizontal）和竖直（vertical）两种方向	string	horizontal	
// labelPlacement	          指定标签放置位置，默认水平放图标右侧，可选 vertical 放图标下方      	string	horizontal	3.7.3
// progressDot	            点状步骤条，可以设置为一个 function，labelPlacement                 将强制为 vertical	Boolean or (iconDot, {index, status, title, description}) => ReactNode	false	
// size	                    指定大小，目前支持普通（default）和迷你（small）	string	default	
// status	                  指定当前步骤的状态，可选 wait process finish error	string	process	
// initial	                起始序号，从 0 开始记数	number	0	3.9.0
// onChange	                点击切换步骤时触发	(current) => void	-	3.19.0

// Steps.Step#
// 步骤条内的每一个步骤

// 参数	                   说明	类型	默认值	版本
// description	           步骤的详情描述，可选	string|ReactNode	-	
// icon	                   步骤图标的类型，可选	string|ReactNode	-	
// status	                 指定状态。当不配置该属性时，会使用 Steps 的 current 来自动指定状态。可选：wait process finish error	string	wait	
// title	                 标题	string|ReactNode	-	
// subTitle	               子标题	string|ReactNode	-	3.22.0
// disabled	               禁用点击	boolean	false	3.22.0